<template>
    <a-modal :title="title" :width="600" :destroyOnClose="true" :maskClosable="false"
             :visible="visible" @cancel="handleCancel" @ok="onSubmit">

        <a-form-model ref="ruleForm" :model="form" :rules="rules">
            <a-form-model-item label="照片详情" prop="src" ref="src">
                <a-upload
                        list-type="picture-card"
                        class="avatar-uploader"
                        :show-upload-list="false"
                        :before-upload="beforeUpload"
                        @change="handleChange"
                        :customRequest="customRequest"
                >
                    <img v-if="form.src" :src="form.src" class="picture" alt="请上传图片"/>
                    <div v-else>
                        <a-icon :type="loading ? 'loading' : 'plus'"/>
                        <div class="ant-upload-text">请选择图片</div>
                    </div>
                </a-upload>
            </a-form-model-item>
            <a-form-model-item label="图片名称" prop="name" ref="name">
                <a-input placeholder="请选择图片名称" v-model="form.name"/>
            </a-form-model-item>
            <a-form-model-item label="显示排序" prop="sort" ref="sort" help="排序数字越大 显示越靠前">
                <a-input-number v-model="form.sort" :min="1" :max="100"/>
            </a-form-model-item>
        </a-form-model>
    </a-modal>
</template>
<script>
    import {fileUpload} from "../../../util/internal.api";
    import {hotelAlbumPhotoAdd} from "../public/http";

    export default {
        props: ["albumId"],
        data() {
            return {
                loading: false, //按钮Loading
                title: "上传照片",
                visible: true, //modal 显示状态
                form: {
                    src: null,
                    name: null,
                    sort: 50,
                    albumId: this.albumId,
                },
                rules: {
                    src: {
                        required: true,
                        message: '请上传一张照片',
                        trigger: 'blur'
                    },
                    name: [
                        {
                            required: true,
                            message: '照片名称不能为空',
                            trigger: 'blur'
                        },
                        {
                            max: 20,
                            message: '照片名称不能超过20个字',
                            trigger: 'blur'
                        }
                    ],
                    sort: {
                        required: true,
                        message: '照片排序不能为空',
                        trigger: 'blur'
                    }
                },
            };
        },
        methods: {
            //关闭弹窗
            handleCancel() {
                this.visible = false;
                this.$emit('closeModal', {
                    render: false
                });
            },
            //完成监听
            onSubmit() {
                this.$refs.ruleForm.validate(valid => {
                    //验证成功后进行数据提交
                    if (valid) {
                        this.loading = true;
                        hotelAlbumPhotoAdd(this.form).then(res => {
                            this.$exMod.ajaxMessage(res);
                            if (res.code === 0) {
                                this.visible = false;
                                this.$emit('closeModal', {render: true});
                            }
                        })
                    }
                });
            },
            //酒店系统长传方法
            customRequest(e) {
                const formData = new FormData();
                formData.append('file', e.file)
                fileUpload(formData).then((res) => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.form.src = res.data.url;
                    }
                })
            },
            //监听上传状态  uploading 开始
            handleChange(info) {
                if (info.file.status === 'uploading') {
                    this.loading = true;
                }
            },
            //上传之前数据检查
            beforeUpload(file) {
                //获取文件名称
                const index = file.name.lastIndexOf(".");
                this.form.name = file.name.replace(file.name.substring(index),'');

                const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
                if (!isJpgOrPng) {
                    this.$message.error('只允许上传JPG、PNG格式的图片文件');
                }
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('单个文件图片不能超过 2MB!');
                }



                return isJpgOrPng && isLt2M;
            },
        },
    };
</script>
<style scoped>
    .picture {
        width: 200px;
        height: 100px;
        overflow: hidden;
    }
</style>
